<template>
  <div>
    <Title :title="title"></Title>
    <div ref="bottom1" style="height: 150px;margin-top: 10px;"></div>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import { Line } from '@antv/g2plot';
import { mapState } from 'vuex';
import moment from 'moment';

export default {
  data() {
    return {
      title: '噪音监测曲线',
      params: {
        page: 1,
        pageSize: 100
      },
      noiseData: [],
      line: null
    };
  },

  computed: {
    ...mapState(['ed'])
  },

  watch: {
    ed: {
      handler() {
        this.getNoiseData();
        if (this.line) {
          this.line.changeData(this.noiseData);
        }
      },
      deep: true
    }
  },

  methods: {
    loadLine() {
      this.line = new Line(this.$refs.bottom1, {
        data: this.noiseData,
        xField: 'formattedTime',
        yField: 'noise_value',
        geometry: 'line',
        color: '#FF6B6B',
        label: {
          visible: true,
          content: (obj) => `噪音: ${obj.noise_value} dB`
        },
        xAxis: {
          label: {
            autoHide: true
          }
        },
        tooltip: {
          formatter: (obj) => {
            return {
              name: obj.formattedTime,
              value: `噪音值: ${obj.noise_value} dB`
            };
          }
        },
        yAxis: {
          min: 0,
          max: 100,
          title: {
            visible: true,
            text: '噪音值 (dB)'
          }
        },
        point: {
          visible: true
        }
      });
      this.line.render();
    },

    async getNoiseData() {
      try {
        const res = await get('/dashboard/pageQueryTodayData', this.params);
        let noise = [];
        let hasValidData = false;

        if (res.data && res.data.list && Array.isArray(res.data.list)) {
          res.data.list.forEach((item) => {
            let formattedTime = '';
            if (item.insert_time && !isNaN(Number(item.insert_time))) {
              formattedTime = moment(Number(item.insert_time)).format('HH:mm:ss');
            } else {
              formattedTime = item.insert_time || `Time_${Date.now()}`;
            }

            let noiseValue = Number(item.noise) || 0;
            if (noiseValue > 0) {
              hasValidData = true;
            }

            noise.push({
              formattedTime,
              noise_value: noiseValue
            });
          });

          // 按时间排序
          noise.sort((a, b) => a.formattedTime.localeCompare(b.formattedTime));
        }

        // 若接口无有效数据，使用模拟数据兜底
        if (!hasValidData) {
          noise = [
            { formattedTime: '16:00:00', noise_value: 40 },
            { formattedTime: '16:05:00', noise_value: 50 },
            { formattedTime: '16:10:00', noise_value: 45 },
            { formattedTime: '16:15:00', noise_value: 55 }
          ];
        }

        this.noiseData = noise;
        console.log('噪音监测数据：', this.noiseData);
      } catch (error) {
        console.error('获取噪音数据失败，使用模拟数据：', error);
        this.noiseData = [
          { formattedTime: '16:00:00', noise_value: 40 },
          { formattedTime: '16:05:00', noise_value: 50 },
          { formattedTime: '16:10:00', noise_value: 45 }
        ];
      }
    }
  },

  async mounted() {
    await this.getNoiseData();
    this.loadLine();
  }
};
</script>

<style lang="less" scoped></style>